import React, { Component } from 'react'
import {Link,Route,NavLink,Switch,Redirect} from 'react-router-dom'
/*
  react 因为有 native小程序 也有web  所以路由的API有很多  实际上这里学习的是 web端的API 

    个人认为react的路由还是逼vue的路由在结构上个组件上会更加的清晰一点

    细节： 所有的路由都需要包裹在 Router路由器下才能使用 一位内路由器有两种规则的 分别是 history 模式 和 hash模式  
      一般使用 history模式   react-router-dom的 history路由器是 BrowserRouter
        一个一劳永逸的方法就是将 BrowserRouter路由器包裹在最外面的一层
*/ 

/*
  新知识: 组件的划分 -- 一般组件and路由组件

    一般组件： 我们使用组件标签进行渲染的组件就是一般组件 如： <Headers />
    路由组件： 路由渲染的组件叫路由组件 如  <Route path="/home" component={Home}></Route>

  区别：

    1. 二者的写法不同 一个是一般组件的写法 一个是路由组件的写法
    2. 二者存放的位置不同，一般组件一般是放在 components文件夹下 路由组件一般放在 pages（views）文件夹下
    3. 最重要的是： 二者接收的 props 不同
      一般组件接收的参数就是正常的 组件传值的参试  给组件传什么就收到什么
      路由组件接收的参试主要有三个大对象，都是需要掌握的，分别是 history location match

      注： 这回我算是知道了为什么有的组件的props是一个空对象 当我想跳转的时候拿不到 history 对象  因为我是在一般组件中找 自然是找不到的
*/ 
import Home from './pages/Home'
import About from './pages/About'
import Headers from './components/Header'
import MyNavLink from './components/MyNavLink'
import Test from './components/Test'
import './App.css'
export default class App extends Component {


  render() {
    return (
      <div className="containers">
        <div>
          <Headers a={1}/>
          <div className="contents">
            <div>
              {/* Link标签 to属性传递 路由需要跳转的位置 */}
              <NavLink activeClassName="activiedDz" to="/home">Home</NavLink>
              <NavLink activeClassName="activiedDz" to="/about/a/b">About</NavLink>

              {/* 使用  NavLink 标签 我们可以多传递一个 activeClassName 给一个当选中该标签的时候可以传递的类名  这样就可以显示指定的效果  总的说 NavLink 是比link更告诫一点的标签 */}
            </div>
            <div>

              {/* Route组件 path注册路由 需要与Link标签的to保持一致才能指定跳转  component属性传递一个组件 */}

              {/* 
                正常情况下 在我们的理解中 一个路由只会匹配一个路由组件 不会匹配多个 
                  但是react的 Route 组件是会不断的向下匹配的  这个就造成了一个效率问题

                  使用 Switch 标签包裹一下之后就可以解决这个问题  因为JS的switch语法就是快关 到一个就停了
                    所以被Switch包裹之后如果有两个路由规则相同的 最终的效果也是显示最先匹配的那个
                      而最先匹配的那个就是代码靠前的那个

                  switch 可以提高效率做单一匹配
              */}
              <Switch>
                {/* 
                  在 Route 中 加入关键字 exact 可以开启严格匹配模式
                    模式是模糊匹配
                    严格模式不要随便开启 需要开的时候再开启，否则会在成不发继续匹配二级路由的情况
                */}
                <Route path="/home" component={Home}></Route>
                <Route path="/about" component={About}></Route>
                {/* 

                  本质上网页刚打开也进行了路由匹配  只是 / 可能没有能匹配上的 这时候就需要使用 Redirect 组件
                
                  使用 Redirect 组件可以路由重定向 也就相当于是一个兜底的人 当都没有匹配的时候就走到某个地方
                    一般用在网页刚打开 就默认让它走一个路由
                  
                    Redirect组件一定要放在Route的后面
                */}
                <Redirect to="/about" />
              </Switch>
              
            </div>
          </div>
        </div>
      </div>
    )
  }
}
